<template>
  <view class="container">
    <custom-nav :title="pageTitle"></custom-nav>

    <view class="content">
      <template v-if="personList?.length">
        <scroll-view style="height:100%" :scroll-y="true" refresher-enabled @scrolltolower="onLower" @refresherrefresh="onRefresh" @refresherrestore="onRestore" :refresher-triggered="isRefresh"
          refresher-background="transparent">

          <view v-for="item in personList" :key="item.id">

            <template v-if="pageType == 'my_collect'">
              <collect-card :info="item"></collect-card>
            </template>
            <template v-else>
              <other-card :info="item" :pageType="pageType"></other-card>
            </template>
          </view>

          <!-- 加载更多 -->
          <custom-load :status="loadStatus"></custom-load>
        </scroll-view>
      </template>

      <view class="empty-con" v-if="!isInitIng && !personList.length">
        <custom-empty :empty-info="emptyInfo"></custom-empty>
      </view>
    </view>
  </view>
</template>

<script setup>
import CollectCard from "./components/collect-card.vue";
import OtherCard from "./components/other-card.vue";
import { fetchCollectList, fetchCollectMeList, fetchToLookMeList, fetchToUnlockMeList, fetchToMeUnlockList } from "@/api/message";
import { getItem } from "@/utils/storage";
import { msgPageEnum } from "@/enum";
import useStore from "@/store";
const { common } = useStore();

const pageType = ref("");
const pageTitle = ref("");
const isRefresh = ref(false);
const isInitIng = ref(true);
const loadStatus = ref("nomore");
const personList = ref([]);
const emptyInfo = computed(() => {
  const tObj = {
    look_my: "还没有人看过我",
    collect_my: "还没有人收藏我",
    contact_my: "还没有人解锁我",
    my_contact: "还没有我解锁的人",
    my_collect: "还没有我收藏的联系人",
  };
  return { title: tObj[pageType.value] };
});
const filterQuery = reactive({
  page: 1,
  limit: 5,
});

const onRefresh = () => {
  filterQuery.page = 1;
  isRefresh.value = true;
  getList(true);
};
const onRestore = () => {
  uni.showToast({
    title: "刷新成功~",
    icon: "none",
  });
};
const onLower = () => {
  loadStatus.value = "loading";
  ++filterQuery.page;

  getList(false);
};

const getList = async (refresh = true) => {
  const params = {
    page: filterQuery.page,
    limit: 5,
  };

  const method = {
    look_my: fetchToLookMeList,
    collect_my: fetchCollectMeList,
    contact_my: fetchToUnlockMeList,
    my_contact: fetchToMeUnlockList,
    my_collect: fetchCollectList,
  };
  try {
    const { data } = await method[pageType.value](params);
    const { list } = data;
    const resList = list.map((v) => {
      if (v.user) {
        v.user.imgs = v.img.slice(0, 3);
        v.user.look = v.look;
        v.user.collect = v.collect;
        v.user.member = v.member;
        if (pageType.value == "my_collect") {
          v.user.collect = 1;
        }

        if (pageType.value == "my_contact") {
          v.user.look = 1;
        }
      }
      return v;
    });

    const nList = resList.filter((v) => {
      if (v.user && v.user.id) {
        if (v.user_id && v.s_user_id) {
          if (v.user_id != v.s_user_id) {
            return v;
          }
        }
      }
    });
    personList.value = refresh ? nList : personList.value.concat(nList);
    if (!nList?.length) {
      loadStatus.value = "nomore";
    }
    isRefresh.value = false;
    isInitIng.value = false;
  } catch (error) {
    isRefresh.value = false;
    isInitIng.value = false;
  }
};

// 移除我的收藏项
const refreshCollect = (id) => {
  const index = personList.value.findIndex((v) => v.user?.id == id);
  personList.value.splice(index, 1);
};

onShow(() => {
  const { user_id, collect, look } = getItem("userIds") || {};
  personList.value.forEach((v) => {
    if (v.user.id == user_id) {
      if (pageType.value == "my_collect") {
        if (collect == 0 || collect == 1) {
          v.user.collect = collect;
          if (collect == 0) {
            refreshCollect(user_id);
          }
        }
      }
      if (look == 0 || look == 1) {
        v.user.look = look;
      }
    }
  });
});

onLoad((options) => {
  isInitIng.value = true;
  pageType.value = options.pageType;
  pageTitle.value = msgPageEnum.getLabel(options.pageType);
  personList.value = [];

  getList();

  // 创建激励视频广告
  common.initAdCase('message');
});

provide("refreshCollect", refreshCollect);
</script>

<style lang=scss scoped>
.empty-con {
  margin-top: 30%;
}
</style>